<template>
  <div id="mouse-position"></div>
</template>

<script setup>
import * as ol from "ol";
import ZoomToExtent from "ol/control/ZoomToExtent";
import ZoomSlider from "ol/control/ZoomSlider";
import MousePosition from "ol/control/MousePosition";
import ScaleLine from "ol/control/ScaleLine";
import OverviewMap from "ol/control/OverviewMap";
import FullScreen from "ol/control/FullScreen";
import { createStringXY } from "ol/coordinate";
import { useLayerStore } from "../stores";
const layerStore = useLayerStore(); // layerStore.base_layer具有响应式
const { base_layer } = storeToRefs(layerStore);
// console.log(ol);
let $map;
const $gaode_vector = inject("$gaode_vector");
const $gaode_image = inject("$gaode_image");
let overview = null;
onMounted(() => {
  $map = inject("$map");
  //   console.log($map);
  addControls($map);
});
function addControls($map) {
  // 导航控件
  const nav = new ZoomToExtent({
    extent: [100, 30, 140, 30],
  });
  $map.addControl(nav);
  // 放大缩小控件
  const zoomslider = new ZoomSlider();
  $map.addControl(zoomslider);
  // 鼠标位置控件
  const mousePositionControl = new MousePosition({
    // 坐标格式
    coordinateFormat: createStringXY(4),
    //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
    projection: "EPSG:4326",
    //坐标信息显示样式类名，默认是'ol-mouse-position'
    className: "cus",
    //显示鼠标位置信息的目标容器
    target: document.getElementById("mouse-position"),
    //未定义坐标的标记
    undefinedHTML: "&nbsp;",
  });
  $map.addControl(mousePositionControl);
  // 比例尺控件
  const scaleLineControl = new ScaleLine({
    // 单位: degrees imperial us nautical metric
    // 度 英制 美国 航海 公制 （度量单位）
    units: "metric",
  });
  $map.addControl(scaleLineControl);
  // 鹰眼控件
  overview = new OverviewMap({
    // 样式
    className: "ol-overviewmap ol-custom-overviewmap",
    layers: [$gaode_vector, $gaode_image],
    collapseLabel: "\u00BB",
    label: "\u00AB",
    collapsed: false,
    view: new ol.View({
      projection: "EPSG:4326",
      minZoom: 8,
      maxZoom: 18,
    }),
  });
  $map.addControl(overview);
  // 全屏控件
  const fullScreenControl = new FullScreen()
  $map.addControl(fullScreenControl)
}
</script>
<style>
.ol-zoomslider {
  top: 7.5em !important;
  background-color: #652e8088;
}
.ol-zoomslider:hover {
  background-color: #652e8099;
}
#mouse-position {
  position: fixed;
  width: 200px;
  height: 50px;
  background-color: #ff2d5166;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  text-align: center;
  line-height: 50px;
}
.ol-custom-overviewmap {
  /* position: fixed; */
  right: 0;
  bottom: 80px;
  top: auto;
  left: auto;
}

.ol-overviewmap-box {
  border: 1px solid #ff2d51;
}
</style>
<style lang="scss" scoped></style>
